<!--
 * @Author: 明月下
 * @Date: 2022-09-02 00:25:15
 * @LastEditors: 明月下
 * @LastEditTime: 2022-09-02 00:59:38
 * @FilePath: \ali-yun-slimming\vue3-vite\src\components\Table.vue
 * @Description:
-->
<template>
    <div class="table">
        <van-grid>
            <van-grid-item text="姓名" />
            <van-grid-item v-for="(item) in dataArr" :text="item.name" :key="item.name"/>
        </van-grid>
        <!-- <van-grid>
            <van-grid-item text="今天" />
            <van-grid-item v-for="item in dataArr" :text="item.timeArr[0]" :key="item.timeArr[0]">
                <span>{{ item.timeArr[0] }}</span><span>{{ item.timeArr[0] - item?.timeArr[1]}}</span>
            </van-grid-item>
        </van-grid> -->
        <van-grid v-for="(time, index) in timeArr" :key="index">
            <van-grid-item :text="time" />
            <van-grid-item v-for="item in dataArr" :key="item?.[time]">
                <span v-if="item?.[time]">{{ item?.[time] }}</span><span v-if="item?.[time] && item?.[timeArr?.[index+1]]">{{ (Number(item[time]) - Number(item?.[timeArr?.[index+1]])).toFixed(2) }}</span>
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script lang="ts" setup>
import { getByName } from '../api/mongodb'
import { onMounted, reactive } from 'vue'
type Weight = {
            'name': string,
            [key: string]: string

        }
type Data = {'name': string, [key: string]: string}
// 获取结算日期
const settlement = 5 // 周几结算
const today = new Date()
const getDateByTime = (date: Date) => date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2,'0') + '-' + date.getDate().toString().padStart(2,'0')
const dayArr = [0, 7-settlement+today.getDay(), 14-settlement+today.getDay(), 21-settlement+today.getDay(), 28-settlement+today.getDay()]
console.log(dayArr)
const timeArr = dayArr.map(item => {
    const date = getDateByTime(new Date(today.getTime() - item*1000*60*60*24))
    return date
})
console.log(timeArr)
// 获取数据
let dataArr: Data[] = reactive([])
const getInfo = async () => {
    await getByName(null).then(data =>{
        // console.log('tableData', data)
        data.forEach((item:Weight) => {
            let obj:Data = reactive({name:item.name})
            timeArr.forEach((time: string) => {
                obj[time] = item?.[time]
            })
            dataArr.push(obj)
        })
    })
}
// console.log(dataArr)

onMounted(() => {
    getInfo()
})


</script>

<style scoped>

</style>